<template>
  <div style="padding: 20px">
    <el-row :gutter="25">
      <el-col :span="6">
        <el-card style="border-radius: 10px; background: linear-gradient(to right, #1bbcdd, #67cadd);">
          <div style="color: #fff">
            <p style="font-size: 32px; line-height: 0">1000</p>
            <p style="margin-left: 8px">今日订单总数</p>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card style="border-radius: 10px;  background: linear-gradient(to right, #fc7298,#fda49f);">
          <div style="color: #fff">
            <p style="font-size: 32px; line-height: 0">￥3426</p>
            <p style="margin-left: 8px">今日销售总额</p>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card style="border-radius: 10px;  background: linear-gradient(to right, #2d7cee,#697dff );">
          <div style="color: #fff">
            <p style="font-size: 32px; line-height: 0">￥4283</p>
            <p style="margin-left: 8px">昨日销售总额</p>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card style="border-radius: 10px;  background: linear-gradient(to right, #f4b729,#f9cd6a );">
          <div style="color: #fff">
            <p style="font-size: 32px; line-height: 0">￥8565</p>
            <p style="margin-left: 8px">最近七天销售总额</p>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-card style="margin-top: 35px;border-radius: 10px;">
      <Foldcolumn />
    </el-card>
    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :span="12">
        <el-card style="border-radius: 10px;">
          <NightingaleChart/>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card style="border-radius: 10px;">
          <StackedLine/>
        </el-card>
      </el-col>
    </el-row>
  </div>

</template>

<script setup>
import Foldcolumn from '@/components/Foldcolumn.vue';
import NightingaleChart from '@/components/NightingaleChart.vue';
import StackedLine from '@/components/StackedLine.vue';
</script>

<style scoped>

</style>
